<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>列表 & key</title>
	</head>
	<body>
		<div id="root"></div>

		<script
			type="text/javascript"
			src="./components/react.development.js"
		></script>
		<script
			type="text/javascript"
			src="./components/react-dom.development.js"
		></script>
		<script type="text/javascript" src="./components/babel.min.js"></script>

    <script type="text/babel">
    
    // 列表 & Key
    // map遍历修改值
    // const numbers = [1, 2, 3, 4, 5, 6];
    // const doubled = numbers.map((number) => number * 2);
    // console.log(doubled);

    // 渲染多个组件
    // const listItems = numbers.map((number) => 
    //   <li key={number.toString()}>{number}</li>
    // )
    // ReactDOM.render(
    //   <ul>{listItems}</ul>,
    //   document.getElementById('root')
    // )
      
    // 基础列表组件
    // function NumberList (props) {
    //   const numbers = props.numbers;
    //   const listItems = numbers.map((number) => 
    //     <li key={number.toString()}>{number}</li>
    //   );
    //   return (
    //     <ul>{listItems}</ul>
    //   )
    // }

    // ReactDOM.render(
    //   <NumberList numbers={numbers}/>,
    //   document.getElementById('root')
    // )

    // 正确！ key应该在数组的上下文中被指定
    // function ListItem (props) {
    //   // 正确！ 这里不需要指定 key：
    //   return <li>{props.value}</li>
    // }

    // function NumberList (props) {
    //   const numbers = props.numbers;
    //   const listItems = numbers.map((number) => 
    //     // 正确！key应该在数组的上下文中被指定
    //     <ListItem value={number} key={number.toString()} />
    //   );

    //   return (
    //     <ul>
    //       {listItems}
    //     </ul>
    //   )
    // }

    // // 定义数据并渲染挂载
    // const numbers = [1, 2, 3, 4, 5];
    // ReactDOM.render(
    //   <NumberList numbers={numbers} />,
    //   document.getElementById('root')
    // )

    // key只是在兄弟节点之间必须唯一
    function Blog (props) {
      const sidebar = (
        <ul>
          {props.posts.map((post) =>
            <li key={post.id}>
              {post.title}
            </li>
          )}
        </ul>
      );

      const content = props.posts.map((post) =>
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.content}</p>
        </div>
      );

      return (
        <div>
          {sidebar}
          <br />
          {content}
        </div>
      );
    }

    const posts = [
      {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
      {id: 2, title: 'Installation', content: 'You can install React from npm.'}
    ];

    ReactDOM.render(
      <Blog posts={posts}/>,
      document.getElementById('root')
    )
		</script>
	</body>
</html>
